<template>
  <div class="weather">
    <div class="icona">
      <div class="icon sunny" v-if="weather.weather_today == '晴'">
        <div class="sun">
          <div class="rays"></div>
        </div>
      </div>
      <div class="icon cloudy" v-if="weather.weather_today == '多云'">
        <div class="cloud">
          <div class="cloud"></div>
        </div>
      </div>
      <div class="icon rainy" v-if="weather.weather_today.indexOf('雨') != -1">
        <div class="cloud">
          <div class="rain"></div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="weathwe_detail">
        <div class="mflex">{{ weather.weather_today }}</div>
        <div class="mflex">{{ weather.temperature }}</div>
        <div class="mflex">{{ weather.today }}</div>
      </div>
    </div>
    <div class="city">{{ weather.city }}</div>
  </div>
</template>

<script>
export default {
  name: "Weather",
  data() {
    return {
      weather: {
        weather_today: "晴",
        temperature: "",
        city: "",
        today: "",
      },
    };
  },
  created() {
    this.getWeather();
    this.getNowDate();
  },
  mounted() {
    const weatherIcon = this.$refs.weatherIcon;
    weatherIcon.classList.replace("sunny", "cloudy");
  },
  methods: {
    //获取日期
    getNowDate() {
      let date = new Date();
      const year = date.getFullYear();
      const monuth = date.getMonth() + 1;
      const day = date.getDate();
      const mydate = `${year}-${monuth}-${day}`;
      this.weather.today = mydate;
    },
    //获取天气数据
    getWeather() {
      this.axios.get("/component/weather").then((res) => {
        this.weather.city = res.data.data.data.city;
        this.weather.temperature = res.data.data.data.wendu + "°C";
        this.weather.weather_today = res.data.data.data.forecast[0].type;
      });
    },
  },
};
</script>

<style scoped>
@import url("../assets/css/WeatherStyle.css");
.weather {
  width: 100%;
  height: 100%;
  background: url("../assets/image/weatherbg.png");
  background-size: 100% 100%;
  border-radius: 20px;
}
.icona {
  box-sizing: border-box;
  float: left;
  margin-left: 5px;
  padding: 15px;
  width: 33%;
  height: 100%;
}

.icon {
  width: 25%;
  height: 100%;
  transform: scale(0.7);
}

.detail {
  float: left;
  width: 45%;
  height: 100%;
  color: #ffffff;
}
.city {
  display: flex;
  float: left;
  width: 20%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 650;
  color: #ffffff;
}
.weathwe_detail {
  display: flex;
  display: -webkit-flex;
  padding: 5px;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mflex {
  flex: 1;
  margin-top: 5px;
  width: 100%;
  font-size: 1.1rem;
}
</style>